<template>
  <div class="JW_head">
       <div class="swiper-container ">
             <div class="swiper-wrapper">
                    <div class="swiper-slide banner1">
                         <header>
                            <p v-for="data in header1">{{data.text}}</p>
                            <li><img src="../assets/img/banner-1.png" height="518" width="750"></li>
                         </header>
                    </div>
                    <div class="swiper-slide banner2">
                       <header>
                            <p v-for="data in header2">{{data.text}}</p>
                            <li><img src="../assets/img/banner-2.png" height="518" width="750"></li>
                         </header>
                    </div>
                    <div class="swiper-slide banner3">
                        <header>
                            <p v-for="data in header3">{{data.text}}</p>
                            <li><img src="../assets/img/banner-3.png" height="518" width="750"></li>
                         </header>
                    </div>
                    <div class="swiper-slide banner4">
                         <header>
                            <p v-for="data in header4">{{data.text}}</p>
                            <li><img src="../assets/img/banner-4.png" height="518" width="750"></li>
                         <div class="fz">
                         <span>立即体验</span>
                         </div> 
                         </header>
                         
                      
                     <router-link to=''></router-link>
                    </div>
              </div>
      </div>  
  
     
 

  </div>
</template>

<script>
import Swiper from 'swiper'
//import '../assets/js/swiper.min.js'
export default {
 name: 'JW_head',
  data () {
    return {
       header1:[
           {text:'一小时新鲜到家'},
           {text:'超市生鲜送到家'}
       ],
        header2:[
           {text:'品质生活极速送达'},
           {text:'有品质有态度有讲究'}
       ],
        header3:[
           {text:'万千商品一建拥有'},
           {text:'商品来自周围三公里内知名超市'}
       ],
        header4:[
           {text:'让生活轻松一点'},
           {text:'不排队不庸碌会生活'}
       ]
       
    }
  },
  mounted(){
     var swiper = new Swiper('.swiper-container',{
       

      scrollbarHide:false,
      autoplayDisableOnInteraction:false,

      loop:true,
      pagination:'.swiper-pagination'       
     
    })
   
  }
}
</script>

<style scoped lang="less" scoped>
@import '../assets/less/style.less';
@import '../assets/css/reset.css';
@import '../assets/less/JW_head.less';
@import '../assets/css/swiper.min.css';

</style>
